<template>
        <div class="index-ad">
            <p>领取阿里云通用云产品1888优惠券</p>
            <a href="">https:/www.aliyun.com/minisite/goods?userCode=brki8iof</a>
            <p>领取腾讯云通用云产品2860优惠券</p>
            <a href="">https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</a>
            <p>阿里云服务器折扣区><a href="">点我进入</a>腾讯云服务器秒杀区><a href="">点我进入</a>
            </p>
            <span>云产品通用红包，可叠加官网常规优惠使用。（仅限新用户）</span>
        </div>
        <div class="index-blurb">
            <div class="blurb-left">
                <h2>若依后台管理系统</h2>
                <p>闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程
                    序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度
                    定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持
                    移动客户端访问。系统会陆续更新一些实用功能</p>
                <span>当前版本:v1.0.0</span><br>
                <button style="color: red; background-color: #ffeded;">￥免费开源</button><br>
                <button style="color: blue; background-color: #ffeded;">#访问码云</button>
                <button>#访问主页</button>
            </div>
            <div class="blurb-right">
                <h2>技术选型</h2>
                <div>
                    <div>
                    <p>前端</p>
                    <p>springboot</p>
                    <p>mybaits</p>
                    </div>
                    <div>
                    <p>后端</p>
                    <p>vue</p>
                    <p>vuex</p>
                    </div>
                </div>
            </div>
        </div>
</template>

<script setup>

</script>

<style scoped>
.index-ad{margin: 30px; padding: 20px; border: 5px solid #fff; border-left-color: #eee;}
.index-ad p{color: #f8b481;}
.index-ad a{text-decoration: none; color: #8cc0ff;}
.index-ad span{color: #f00;}
.index-blurb{display: flex; justify-content: flex-start; align-items: flex-start; margin: 30px; border: 2px solid #fff; border-bottom-color: #eee; border-top-color: #eee; padding: 20px;}
.blurb-left,.blurb-right{width: 45%; text-align: left; margin-right: 30px;}
.index-blurb h2{margin: 20px 0;}
.blurb-left span{margin: 20px 0; display: block;}
.blurb-left p{display: block; width: 500px;}
.blurb-left button{margin: 0 20px 20px 0; padding: 10px; border: 0; border-radius: 5px;}
.blurb-right>div{display: flex; align-items: center; justify-content: space-between; width: 45%;}
</style>